<template>
  <c-card title="高倍率发展趋势">
    <trend-chart :barData="trendChartData" height="250px"/>
    <div class="row">
      科室
      <a-select :options="options" v-model="selected"/>
    </div>
    <a-table class="custom" :columns="tableColumns" :data-source="tableData" :rowKey="()=>Math.random()"/>
  </c-card>
</template>

<script lang="ts">
import trendChart from "./trendChart.vue";
import {highAndLowRateAnalysis} from "@/api/drgsGroupResults.js";
import {getPercent} from "@/utils/transform.js"

export default {
  name: "topContent",
  components: {trendChart},
  inject: {
    timeParamsFormParent: {
      type: Object,
      default: () => ({})
    },
    getTimeParamsFormParent: {
      type: Function,
      default: () => () => ({})
    }
  },
  data() {
    return {
      trendChartData: {
        xAxis: [],
        dataList: [
          {
            series: {name: '高倍率病例', type: 'bar', itemStyle: {color: "#5467E6"}},
            dataKey: "highCount",
            rate: false,
            data: []
          },
          {
            series: {name: '低倍率病例', type: 'bar', itemStyle: {color: "#E00703"}},
            dataKey: "lowestCount",
            rate: false,
            data: [],
          },
          {
            series: {name: "高倍率病例占比", type: 'line', itemStyle: {color: "#5467E6"}},
            dataKey: "highCount",
            rate: true,
            data: []
          },
          {
            series: {name: '低倍率病例占比', type: 'line', itemStyle: {color: "#E00703"}},
            dataKey: "lowestCount",
            rate: true,
            data: []
          }
        ]
      },
      options: [
        {label: '全部', value: 1}
      ],
      selected: 1,
      tableColumns: [
        {
          title: '病例类型', align: 'center', customRender: (value, row, index) => {
            return {
              attrs: {rowSpan: index % 2 === 1 ? 0 : 2, colSpan: 1},
              children: [{tag: 'div', text: index === 0 ? '高倍率病例' : "低倍率病例"}],
            };
          },
        },
        {
          title: '指标', align: 'center', customRender: (value, row, index) => {
            return {
              children: [
                {tag: "div", text: index % 2 === 0 ? "病例数" : "占比"}
              ],
            };
          }
        }
      ],
      tableData: [],
      baseData: null
    }
  },
  computed: {
    reactiveTimeParamsFormParent() {
      return this.getTimeParamsFormParent();
    }
  },
  watch: {
    reactiveTimeParamsFormParent() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.getHighAndLowRateAnalysis();
    },
    async getHighAndLowRateAnalysis() {
      const params = {
        ...this.reactiveTimeParamsFormParent
      }
      this.trendChartData.xAxis = [];
      this.trendChartData.dataList.forEach(item => item.data = []);
      const res = await highAndLowRateAnalysis(params);
      if (res.data instanceof Array && res.data.length > 0) {
        this.baseData = res.data;
        this.compileChartDataByHighAndLowRateAnalysis();
        this.compileTableDataByHighAndLowRateAnalysis();
      } else {
        console.warn('接口：highAndLowRateAnalysis；数据返回异常')
      }
    },
    compileChartDataByHighAndLowRateAnalysis() {
      this.trendChartData.xAxis = this.baseData.map(item => item.months);
      this.trendChartData.dataList.forEach(item => item.data = this.baseData.map(mItem => {
        if (item.rate) {
          const rate = getPercent(mItem[item.dataKey], mItem['countNum']).replace('%', '')
          return Number(mItem[item.dataKey]) / 100 * Number(rate)
        } else {
          return mItem[item.dataKey]
        }

      }))
    },
    compileTableDataByHighAndLowRateAnalysis() {
      this.tableColumns.splice(2, this.tableColumns.length)
      for (const item of this.baseData) {
        this.tableColumns.push({
          title: item.months,
          align: 'center',
          dataIndex: item.months
        })
      }
      const columnKeys = this.tableColumns.slice(2, this.tableColumns.length).map(item => item.dataIndex);
      const keys = ['highCount', 'highCount rate', 'lowestCount', 'lowestCount rate'];
      const compileRowData = (key) => {
        const temp = {};
        for (const item of columnKeys) {
          if (/rate/.test(key)) {
            const forTemp = this.baseData.find(item => item.months)
            temp[item] = getPercent(forTemp[key.split(' ')[0]], forTemp['countNum'])
          } else {
            temp[item] = this.baseData.find(item => item.months)[key];
          }
        }
        return temp
      }
      this.tableData = keys.map(item => ({...compileRowData(item)}));
    }
  }
}
</script>

<style scoped lang="stylus">
.row {
  padding-left: 10px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #484D78;
  line-height: 12px;
}

>>> .ant-select {
  width: 120px;
  height: 24px;
  margin-left: 10px;

  .ant-select-selection {
    height: 24px;

    .ant-select-selection__rendered {
      line-height: 24px;
      font-size: 12px;
      color: #484D78;
    }
  }
}

>>> .ant-table-wrapper {

  .ant-table-tbody {
    .ant-table-row:nth-child(odd) > td:first-child {
      background-color #EBF1FF !important
      font-size: 12px;
      color: #484D78;
      text-align center

      div {
        position relative
        top 20px
      }
    }

    .ant-table-row:nth-child(odd) > td:nth-child(2) {
      background-color #F1F5FF !important

      div {
        text-align center
      }
    }

    .ant-table-row:nth-child(even) > td:nth-child(1) {
      background-color #F1F5FF !important

      div {
        text-align center
      }
    }
  }
}
</style>
